<template>
  <div class="layout-table-header">
    <div class="match-name-box">
      <div>
        <div
          class="match-name-word"
          :style="
            match_name.length > 30 ? 'font-size:24px;font-weight:700;' : ''
          "
        >
          <b>{{ match_name }}</b>
        </div>
        <div
          style="
            font-size: 18px;
            font-family: Microsoft YaHei, serif;
            margin-bottom: 2px;
          "
        >
          {{ project_name }}
        </div>
      </div>
      <div class="match-project-name">
        <img class="match-name-logo" v-if="logo_url" :src="logo_url" />
        <img
          class="match-name-logo"
          v-else
          src="http://qncdn.tissys.com/admin/static/logo.png"
        />
      </div>
    </div>
    <div class="match-info">
      <div class="match-info-item">
        <span style="float: left; width: 48%">比赛日期</span>
        <span style="float: left; width: 40%">地点</span>
        <span>裁判长</span>
      </div>
      <div style="font-size: 16px; margin: 3px 0">
        <span style="float: left; width: 48%; height: 20px"
          ><span v-if="match_time" v-html="time"></span
        ></span>
        <span style="float: left; width: 40%">{{ match_location }}</span>
        <span>{{ referee_name }}</span>
      </div>
      <div style="height: 4px; width: 100%; background: #000"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "layoutTableHeader",
  props: {
    match_name: {
      type: String,
      default: "",
    },
    match_location: String,
    project_name: String,
    referee_name: String,
    match_time: String,
    logo_url: String,
  },
  computed: {
    time() {
      if (this.match_time) {
        if (this.match_time.split(",").length != 1) {
          let matchTime = "";
          let startArr = this.match_time.split(",")[0].split("-");
          let endTimeArr = this.match_time
            .split(",")
            [this.match_time.split(",").length - 1].split("-");
          let startM =
            startArr[1] < 10 ? startArr[1].replace(/0/g, "") : startArr[1];
          let startD =
            startArr[2] < 10 ? startArr[2].replace(/0/g, "") : startArr[2];
          let endTimeM =
            endTimeArr[1] < 10
              ? endTimeArr[1].replace(/0/g, "")
              : endTimeArr[1];
          let endTimeD =
            endTimeArr[2] < 10
              ? endTimeArr[2].replace(/0/g, "")
              : endTimeArr[2];
          if (startArr[0] == endTimeArr[0]) {
            let start = `<b>${startArr[0]}</b>年<b>${startM}</b>月<b>${startD}</b>日`;
            let end = `<b>${endTimeM}</b>月<b>${endTimeD}</b>日`;
            matchTime = `${start}-${end}`;
          } else {
            let start = `<b>${startArr[0]}</b>年<b>${startM}</b>月<b>${startD}</b>日`;
            let end = `<b>${endTimeArr[0]}</b>年<b>${endTimeM}</b>月<b>${endTimeD}</b>日`;
            matchTime = `${start}-${end}`;
          }
          return matchTime;
        } else {
          let dateArr = this.match_time.split("-");
          let m = dateArr[1] < 10 ? dateArr[1].replace(/0/g, "") : dateArr[1];
          let d = dateArr[2] < 10 ? dateArr[2].replace(/0/g, "") : dateArr[2];
          let date = `<b>${dateArr[0]}</b>年<b>${m}</b>月<b>${d}</b>日`;
          return date;
        }
      } else {
        return "";
      }
      // return this.match_time.split(',').length !=1 ? `${this.match_time.split(',')[0].replace(/-/g,"/")}-${this.match_time.split(',')[this.match_time.split(',').length-1].replace(/-/g,"/")}` : this.match_time
    },
  },
};
</script>

<style lang="less" scoped>
.layout-table-header {
  height: 140px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: KaiTi, serif;
}

.match-name {
  width: 50%;
  height: 50%;
  padding-left: 33.34%;
}

.match-name-box {
  width: 70%;
  margin: 0 auto;
  //   height: 50%;
  display: flex;
  //   align-items: center;
  //   // justify-content: center;
  justify-content: space-between;
}

.match-name-logo {
  width: 50px;
  height: 50px;
  float: right;
  margin-right: 20px;
}

.match-name-word {
  font-size: 30px;
}

.match-project-name {
  // width: 70%;
  // margin: 0 auto;
  // height: 20%;
  // font-size: 26px;
  // // display:flex;
  // justify-content: center;
}

.match-info {
  // height: 20%;
  width: 70%;
  margin: 0 auto;
  // display: flex;
  justify-content: space-between;
  font-size: 14px;
  align-items: center;
  font-family: Microsoft YaHei, serif;
}

.match-info-item {
  flex: 1;
  // text-align: center;
  overflow: hidden;
  background: #ccc;
}
</style>
